<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>预约修改 - Nkuvr 后台管理系统</title>
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../../css/style.min.css" rel="stylesheet">
    <!--日期选择插件-->
    <link rel="stylesheet" href="../../js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside th:replace="fragment/_fragment::navbar"></aside>


        <!--头部信息-->
        <header th:replace="fragment/_fragment::sidebar"></header>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header"><h4>预约向导</h4></div>
                            <div class="card-body">

                                <form action="#!" method="post" class="guide-box" data-navigateable="true">
                                    <input type="hidden" name="id" id="id" th:value="${appointment.id}">
                                    <input type="hidden" name="uid" id="uid" th:value="${session.loginUser.id}">

                                    <ul class="nav-step step-dots">

                                        <li class="nav-step-item active">
                                            <span>基本信息</span>
                                            <a data-toggle="tab" href="#step-1"></a>
                                        </li>

                                        <li class="nav-step-item">
                                            <span>服务需求</span>
                                            <a data-toggle="tab" href="#step-2"></a>
                                        </li>

                                        <li class="nav-step-item">
                                            <span>时间选择</span>
                                            <a data-toggle="tab" href="#step-3"></a>
                                        </li>

                                        <li class="nav-step-item">
                                            <span>其他信息</span>
                                            <a data-toggle="tab" href="#step-4"></a>
                                        </li>
                                    </ul>
                                    <!--对应内容-->
                                    <div class="nav-step-content">
                                        <div class="nav-step-pane hidden active" id="step-1">
                                            <div class="form-group">
                                                <label>活动名称</label>
                                                <input class="form-control" type="text" name="activityName"
                                                       th:value="${appointment.activityName}"
                                                       id="activityName">
                                            </div>
                                            <div class="form-group">
                                                <label>负责人</label>
                                                <input class="form-control" type="text" name="principal" id="principal"
                                                       th:value="${appointment.principal}">
                                            </div>
                                            <div class="form-group">
                                                <label>联系方式</label>
                                                <input class="form-control" type="text" name="contact" id="contact"
                                                       th:value="${appointment.contact}">
                                            </div>


                                            <div class="form-group">
                                                <label>拟用区域</label>
                                                <div class="form-controls">
                                                    <select name="lid" class="form-control" id="lid">
                                                        <option value="1">3-201</option>
                                                        <option value="2">3-101</option>
                                                        <option value="3">3-205</option>
                                                        <option value="4">4-101</option>
                                                    </select>
                                                </div>
                                            </div>


                                            <div class="form-group">
                                                <label>预约人数</label>
                                                <input class="form-control" type="text" name="appointmentNumber"
                                                       th:value="${appointment.appointmentNumber}"
                                                       id="appointmentNumber">
                                            </div>
                                            <div class="form-group">
                                                <label>主讲人或活动邀请领导嘉宾</label>
                                                <input class="form-control" type="text" name="speaker" id="speaker"
                                                       th:value="${appointment.speaker}">
                                            </div>
                                            <div class="form-group">
                                                <label>活动描述</label>
                                                <input class="form-control" type="text" name="description"
                                                       th:value="${appointment.description}"
                                                       id="description">
                                            </div>
                                        </div>

                                        <div class="nav-step-pane hidden" id="step-2">
                                            <div class="form-group">
                                                <label>设备需求</label>
                                                <input class="form-control" type="text" name="deviceDemand"
                                                       th:value="${appointment.deviceDemand}"
                                                       id="deviceDemand" placeholder="可选项">
                                            </div>
                                            <div class="form-group">
                                                <label>消费需求</label>
                                                <input class="form-control" type="text" name="consumerDemand"
                                                       th:value="${appointment.consumerDemand}"
                                                       id="consumerDemand" placeholder="可选项">
                                            </div>
                                            <div class="form-group">
                                                <label>其他需求</label>
                                                <input class="form-control" type="text" name="otherDemand"
                                                       th:value="${appointment.otherDemand}"
                                                       id="otherDemand" placeholder="可选项">
                                            </div>
                                        </div>

                                        <div class="nav-step-pane hidden" id="step-3">
                                            <div class="form-group">
                                                <div class="card">
                                                    <label>活动时间</label>
                                                    <div class="card-body">
                                                        <input class="form-control js-datepicker m-b-10" type="text"
                                                               id="activityTime" name="activityTime"
                                                               placeholder="yyyy-mm-dd"
                                                               th:value="${#dates.format(appointment.activityTime, 'yyyy-MM-dd HH:mm')}"
                                                               data-date-format="yyyy-mm-dd"/>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="card">
                                                    <label>布场时间</label>
                                                    <div class="card-body">
                                                        <input class="form-control js-datepicker m-b-10" type="text"
                                                               id="setTime" name="setTime"
                                                               placeholder="yyyy-mm-dd"
                                                               th:value="${#dates.format(appointment.setTime, 'yyyy-MM-dd HH:mm')}"
                                                               data-date-format="yyyy-mm-dd"/>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="nav-step-pane hidden" id="step-4">
                                            <div class="form-group">
                                                <label>工作人员</label>
                                                <input class="form-control" type="text" name="staff" id="staff"
                                                       th:value="${appointment.staff}"
                                                       placeholder="可选项">
                                            </div>
                                            <div class="form-group">
                                                <label>联系方式</label>
                                                <input class="form-control" type="text" name="staffContact"
                                                       th:value="${appointment.staffContact}"
                                                       id="staffContact" placeholder="可选项">
                                            </div>
                                            <div class="form-group">
                                                <label>指导老师</label>
                                                <input class="form-control" type="text" name="teacher" id="teacher"
                                                       th:value="${appointment.teacher}"
                                                       placeholder="可选项">
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="nav-step-button">
                                        <button class="btn btn-secondary disabled" data-wizard="prev" type="button">
                                            上一步
                                        </button>
                                        <button class="btn btn-secondary" data-wizard="next" type="button">下一步</button>
                                        <a class="btn btn-primary hidden" data-wizard="finish" type="submit">完成</a>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../js/main.min.js"></script>
<!--向导插件-->
<script type="text/javascript" src="../../js/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.guide-box').bootstrapWizard({
            'tabClass': 'nav-step',
            'nextSelector': '[data-wizard="next"]',
            'previousSelector': '[data-wizard="prev"]',
            'finishSelector': '[data-wizard="finish"]',
            'onTabClick': function (e, t, i) {
                if (!$('.guide-box').is('[data-navigateable="true"]')) return !1
            },
            'onTabShow': function (e, t, i) {
                t.children(":gt(" + i + ").complete").removeClass("complete");
                t.children(":lt(" + i + "):not(.complete)").addClass("complete");
            },
            'onFinish': function () {
                // 点击完成后处理提交
                var id = $('#id').val();
                var uid = $('#uid').val();
                var lid = $('#lid').val();
                var activityName = $('#activityName').val();
                var activityTime = $('#activityTime').val();
                var contact = $('#contact').val();
                var staffContact = $('#staffContact').val();
                var staff = $('#staff').val();
                var setTime = $('#setTime').val();
                var speaker = $('#speaker').val();
                var teacher = $('#teacher').val();
                var description = $('#description').val();
                var principal = $('#principal').val();
                var deviceDemand = $('#deviceDemand').val();
                var otherDemand = $('#otherDemand').val();
                var consumerDemand = $('#consumerDemand').val();
                var appointmentNumber = $('#appointmentNumber').val();

                if (activityName === "") {
                    layer.msg("活动名称不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }
                if (principal === "") {
                    layer.msg("负责人不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }
                if (contact === "") {
                    layer.msg("联系方式不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }
                if (speaker === "") {
                    layer.msg("主讲人或活动邀请领导嘉宾不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }
                if (description === "") {
                    layer.msg("活动描述不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }

                if (activityTime === "") {
                    layer.msg("活动时间不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }
                if (setTime === "") {
                    layer.msg("布场不能为空，请输入!", {time: 1000, icon: 5, shift: 6});
                    return;
                }


                var loadingIndex = null;
                layer.confirm("确定新增该预约吗？", {btn: ['确认', '取消']}, function () {
                    $.ajax({
                        type: "post",
                        url: "/appointment/doAppointmentEdit",
                        async: false,
                        dataType: "json",
                        data: {
                            "id": id,
                            "lid": lid,
                            "activityName": activityName,
                            "activityTime": activityTime,
                            "staffContact": staffContact,
                            "contact": contact,
                            "staff": staff,
                            "setTime": setTime,
                            "speaker": speaker,
                            "teacher": teacher,
                            "description": description,
                            "principal": principal,
                            "deviceDemand": deviceDemand,
                            "otherDemand": otherDemand,
                            "consumerDemand": consumerDemand,
                            "appointmentNumber": appointmentNumber
                        },
                        beforeSend: function () {
                            loadingIndex = layer.msg("处理中", {icon: 16});
                        },
                        success: function (result) {
                            layer.close(loadingIndex);
                            if (result.success) {
                                layer.msg("修改成功", {time: 1000, icon: 6});
                                window.location.href = "/appointment/my/" + uid;
                            } else {
                                layer.msg("修改失败，请重新操作", {time: 1000, icon: 5, shift: 6});
                            }
                        }
                    });
                    return false;
                });
            }
        });
    });
</script>
<!--日期选择插件-->
<script src="../../js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="../../js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="../../layer/layer.js"></script>
</body>
</html>